<template>
	<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
		<el-row class="h-100" type="flex">
			<cl-biz-toolbar v-model="currBiz.biz_id" show-hq @change="bizChange" />
			<cl-flex1 class="h-100" style="overflow: hidden">
				<cl-pagefull @resize="onResize">
					<template #head>
						<el-row type="flex" class="pb-1">
							<div class="title">{{ currBiz.biz_name }}</div>
						</el-row>
					</template>
					<!-- 数据表格 -->
					<div class="h-100">
						<cl-table v-bind="table">
							<cl-empty slot="empty" />
							<template #column-opt="{ scope: { row } }">
								<div class="flex flex-align-center">
									<el-button
										type="primary"
										v-if="row.copy"
										@click="promotion(row)"
									>
										计划列表
									</el-button>
									<!-- <el-button
										v-auth="'store_personneldepartment_del'"
										@click="remove(row)"
									>
										删除
									</el-button> -->
								</div>
							</template>
						</cl-table>
					</div>
				</cl-pagefull>
			</cl-flex1>
		</el-row>
		<promotions ref="promotions" />
	</cl-crud>
</template>

<script>
// 门店表单
import Promotions from "./components/promotions.vue";
export default {
	name: "CrmPersonnelDept",
	components: {
		Promotions
	},
	data() {
		return {
			// 表格配置
			table: {
				"context-menu": ["refresh"],
				props: {
					"row-key": "id",
					"default-expand-all": true,
					maxHeight: 500
				},
				columns: [
					{
						label: "名称",
						prop: "name",
						minWidth: 200,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "账号",
						prop: "email",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{ label: "操作", prop: "opt", width: 300, fixed: "right", align: "left", }
				]
			},
			search: {
				showpage: 1
			},
			currBiz: {},
			load: false
		};
	},
	methods: {
		onResize(h) {
			this.table.props.maxHeight = h;
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.oceanengine)
			.set("dict", {
					api: {
						page: "advertiserList"
					}
				})
			.done();
			if (!this.load) return;
			app.refresh(this.search);
		},
		async onRefresh(params, { next, done, render }) {
			const { biz_id } = this.currBiz;
			let { list } = await next({
				...params,
				biz_id
			});
			render(list);
		},
		// crud刷新
		refresh(biz_id) {
			biz_id && (this.currBiz.biz_id = biz_id);
			this.$refs.crud.refresh({ page: 1, ...this.search });
			this.load = true;
		},
		// 切换事业部
		bizChange(v) {
			this.currBiz = v;
			this.search.keyword = "";
			this.$nextTick(() => {
				this.refresh();
			});
		},
		openForm(type = "add", data) {
			this.$refs.form.open(type, data);
		},
		promotion (row) {
			console.log(row)
			this.$refs.promotions.open(row.email)
		}
	}
};
</script>
<style lang="scss" scoped>
.title {
	font-size: 18px;
}
</style>
